<script setup>
    import {ref} from "vue"
    let count=ref(0)
    function dianji(event){
        count.value++
        if(count.value%3==0){
            event.target.style.color='red'
        }
        else{
            event.target.style.color='blue'
        }
    }
    function dianji1(n,event){
        count.value+=n
        if(count.value%3==0){
            event.target.style.color='red'
        }
        else{
            event.target.style.color='blue'
        }
    }
    function abc(){
        let box3=document.getElementById('box3')
        console.log(box3.scrollTop)
    }
</script>
<template>
    <h1>事件</h1><br>
    <p>
    {{count}}
    <button @click="dianji">点我触发惊喜</button>
     <button @click="dianji1(2,$event)">点我触发惊喜</button>
    </p>
    <!-- 向外冒泡 -->
    <div @click='console.log("我是你的爷爷")'>
        <div @click='console.log("我是你的爸爸")'>
            <div @click='console.log("我是你的儿子")'>
                <button @click='console.log("who are you")'>向外冒泡点击</button>
            </div>
        </div>
    </div>
    <!-- 由外向内冒泡 -->
    <div @click.capture='console.log("我是你的爷爷")'>
        <div @click='console.log("我是你的爸爸")'>
            <div @click='console.log("我是你的儿子")'>
                <button @click='console.log("who are you")'>由外向内冒泡点击</button>
            </div>
        </div>
    </div>
    <!-- 阻止冒泡 -->
    <div @click.capture='console.log("我是你的爷爷")'>
        <div @click='console.log("我是你的爸爸")'>
            <div @click.stop='console.log("我是你的儿子")'>
                <button @click='console.log("who are you")'>阻止冒泡点击</button>
            </div>
        </div>
    </div>
    <!-- 阻止默认事件行为 -->
    <a href ="https://www.baidu.com" target="_blank" @click.prevent>baidu</a>
    <!-- 只触发一次 -->
     <button @click.once="console.log('sb')">sn</button>
     <!-- 只有自身触发事件时才能执行本身事件 -->
          <div @click.capture='console.log("我是你的爷爷")'>
        <div @click.self='console.log("我是你的爸爸")'>
            <div @click='console.log("我是你的儿子")'>
                <button @click='console.log("who are you")'>self点击</button>
            </div>
        </div>
    </div>
    <!-- 监听滚动事件 -->
    <div id="box3" v-on:scroll="abc">We use optional cookies to improve your experience on our websites, such as through social media connections, and to display personalized advertising based on your online activity. If you reject optional cookies, only cookies necessary to provide you the services will be used. You may change your selection by clicking “Manage Cookies” at the bottom of the page. Privacy Statement Third-Party Cookies</div>
    <!-- 捕获特定按键 -->
     <input type="text" @keyup.enter="console.log('sb')">
</template>

<style scoped>
#box3{
    width: 100px;
    height: 90px;
    overflow:auto;
}
</style>